<template>
  <div class="props-option">
    <el-collapse v-model="activeNames" >
      <el-collapse-item title="标题" name="title" v-if="chartConf && chartConf.echarts && echartTitle">
        <el-row class="text-left">
          <el-col :span="24">
          <el-checkbox v-model="echartTitle.show" class="el-icon-view"></el-checkbox>
          </el-col>
        </el-row>
        <div v-if="echartTitle.show">
        <el-row class="text-left">
          <el-col :span="4">主标题</el-col>
          <el-col :span="19"><el-input
            type="textarea"
            :rows="2"
            :maxlength="300"
            placeholder="请输入主标题"
            v-model="echartTitle.text">
          </el-input></el-col>
        </el-row>
        <el-row class="text-left">
          <el-col :span="4">超链接</el-col>
          <el-col :span="19"><el-input
            type="textarea"
            :rows="2"
            :maxlength="300"
            placeholder="请输入链接地址（http:// https://）"
            v-model="echartTitle.link">
          </el-input></el-col>
        </el-row>
        <el-row class="text-left">
          <el-col :span="4">副标题</el-col>
          <el-col :span="19"><el-input
            type="textarea"
            :rows="2"
            :maxlength="300"
            placeholder="请输入主标题"
            v-model="echartTitle.subText">
          </el-input></el-col>
        </el-row>
        <el-row class="text-left">
          <el-col :span="4">链接地址（副）</el-col>
          <el-col :span="19"><el-input
            type="textarea"
            :rows="2"
            :maxlength="300"
            placeholder="请输入链接地址（http:// https://）"
            v-model="echartTitle.sublink">
          </el-input></el-col>
        </el-row>
        </div>
      </el-collapse-item>
<!--      外观配置-->
      <el-collapse-item title="图例" name="board" v-if="chartConf && chartConf.echarts && chartConf.echarts.legend">
        <el-row class="text-left">
             <el-col :span="24">
                <el-checkbox v-model="echartLegend.show" class="el-icon-view"></el-checkbox>
              </el-col>
            </el-row>
            <div v-if="echartLegend.show">
              <el-radio-group v-model="echartLegend.orient" size="mini">
                <el-radio-button label="horizontal">水平</el-radio-button>
                <el-radio-button label="vertical">垂直</el-radio-button>
              </el-radio-group>
           </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import sysconfig from '../../../../assets/js/sysconfig'
export default {
  name: 'ChartOption',
  props: {
    index: {
      type: Number
    }
  },
  data () {
    return {
      fontsizeList: sysconfig.fontsizeList,
      fontfamilys: sysconfig.fontfamilys,
      value: '',
      num: 1,
      color: 'rgba(255, 69, 0, 0.68)',
      predefineColors: sysconfig.predefineColors,
      activeNames: ['layout', 'board', 'text']
    }
  },
  computed: {
    // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'chartsConfig'
    ]),
    chartConf () {
      // 索引值
      return this.chartsConfig[this.$props.index]
    },
    echartTitle () {
      return this.chartConf && this.chartConf.echarts && this.chartConf.echarts.title
    },
    echartLegend () {
      return this.chartConf && this.chartConf.echarts && this.chartConf.echarts.legend
    }
  },
  methods: {
    handleRemove (file, fileList) {
      console.log(file, fileList)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.chart-option {
 height: auto;
 width: auto;
}
.chart-option .input-class .el-input-group__append{
  padding: 0 2px!important;
}

</style>
